<script setup>
import { defineProps, defineModel, computed, ref } from 'vue'

import Empty from '@/components/icons/IconEmpty.vue'
import Rename from '@/components/icons/IconRename.vue'
import Delete from '@/components/icons/IconDelete.vue'

const emits = defineEmits(['create', 'rename', 'remove'])

const props = defineProps({
  id: {
    type: Number,
    default: 0,
  },
  data: {
    type: Array,
    default: () => [],
  },
})

const active = defineModel()
const shows = ref([])
const keyword = ref('')

const search = () => {
  props.data.forEach((session) => {
    shows.value[session.id] = session.name.includes(keyword.value)
  })
}
</script>

<template>
  <div class="flex flex-col h-full w-full p-2">
    <div class="search flex items-center justify-between space-x-1">
      <el-input placeholder="输入搜索对话" v-model="keyword" @input="search" clearable />
      <el-button style="width: 40px" @click="emits('create')">
        <FontAwesomeIcon icon="plus" />
      </el-button>
    </div>
    <el-scrollbar v-if="props.data.length > 0" class="flex-1 mt-2">
      <template v-for="session in props.data" :key="session.id">
        <div
          :class="{ 'chat-session': true, active: $props.id === session.id }"
          v-if="shows[session.id] !== false"
        >
          <RouterLink class="flex-1" :to="{ name: 'chatChat', params: { id: session.id } }">
            <div class="text-sm">{{ session.name }}</div>
          </RouterLink>
          <span class="flex gap-0.5">
            <span class="operator" @click="emits('rename', session.id)">
              <Rename />
            </span>
            <span class="operator" @click="emits('remove', session.id)">
              <Delete />
            </span>
          </span>
        </div>
      </template>
    </el-scrollbar>
    <div v-else class="mt-14 flex flex-col items-center text-[--el-color-info]">
      <Empty />
      <div class="mt-4">暂无对话</div>
    </div>
  </div>
</template>

<style scoped>
.search .el-button,
.el-button.is-round {
  @apply px-3;
}

.chat-session {
  @apply flex justify-between items-center relative px-2 py-1 mb-1 cursor-pointer 
  hover:bg-[--el-fill-color-light] rounded;
}

.chat-session.active {
  @apply bg-[--el-fill-color];
}

.operator {
  @apply rounded px-1 py-1 sm:opacity-0 hover:bg-[--el-fill-color-darker];
}

.chat-session:hover .operator {
  opacity: 1;
}
</style>
